<template>
	<view class="tabs">
		<view class="text-box" :class="item.isActive?'active':''" v-for="(item,index) in tabs" :key="item.id"
		@click="click(item.id)">
			{{item.value}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"hjx-tabs",
		data() {
			return {
				
			};
		},		
		props:['tabs'],
		methods:{
			click(activeId){
				this.$emit("tabsChange",activeId);
			}
		}
	}
</script>

<style lang="scss">
page {
	padding-top: 90rpx;
}
.tabs{
	height: 100rpx;
	display: flex;
	.text-box{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #d6d5da;
		&.active{
			border-bottom: 3px solid #ddaacc;
		}
	}
}
</style>